<template>
    <div class="lun">
        <el-container class="yi" style="background-color:#F3F3F3 ">
            <div class="er">
                <span style="line-height: 60px">轮播图</span>
                <el-button class="you" size="mini" icon="el-icon-arrow-left">返回</el-button>
                <el-button class="you" size="mini" icon="el-icon-refresh">刷新</el-button>
            </div>
        </el-container>
        <el-container>
            <div class="er">
                <i class="el-icon-search"></i>
                <span style="line-height: 60px">筛选查询</span>
                <el-button class="you" size="mini">高级检索</el-button>
            </div>
        </el-container>
        <el-form :inline="true" :model="formInline" class="demo-form-inline bj">
            <el-form-item label="名称：">
                <el-input v-model="formInline.imgTitle" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="位置:" style="padding-left: 150px">
                <el-select v-model="formInline.imgWeizhi" placeholder="全部">
                    <el-option label="App首页轮播" value="首页轮播"></el-option>
                    <el-option label="不知道在哪" value="不知道在哪"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态：" style="padding-left: 150px">
                <el-select v-model="formInline.display" placeholder="上线/下线">
                    <el-option label="上线" value="1"></el-option>
                    <el-option label="下线" value="2"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-container class="er">
            <div class="er">
                <i class="el-icon-s-grid"></i>
                <span style="line-height: 60px">数据列表</span>
                <el-select v-model="value" placeholder="排序方式" class="dx" size="mini">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" class="gd"></el-option>
                </el-select>
                <el-select v-model="value" placeholder="选择条数" class="dx" size="mini">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" class="gd"></el-option>
                </el-select>
                <el-button @click="dialogForm = true" class="you" size="mini">添加轮播图</el-button>
            </div>
        </el-container>
        <el-table :data="list" border="true" height="250" class="bg">
            <el-table-column type="selection" width="60" align="center"></el-table-column>
            <el-table-column fixed prop="serialNumber" label="编号" width="150" align="center"></el-table-column>
            <el-table-column prop="imgTitle" label="名称" width="140" align="center"></el-table-column>
            <el-table-column prop="imgWeizhi" label="位置" width="140" align="center"></el-table-column>
            <el-table-column prop="imgAddress" label="图片" width="140" align="center"></el-table-column>
            <el-table-column prop="startDate,expireDate" label="时间" width="300" align="center">
                <template slot-scope="scope">
                    <p>开始时间：{{scope.row.startDate}}</p>
                    <p>结束时间：{{scope.row.expireDate}}</p>
                </template>
            </el-table-column>
            <el-table-column prop="display" label="上线/下线" width="140" align="center">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.value = scope.row.display == 1 ? true : false" @change="userStateChange(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="imgDianji" label="点击次数" width="140" align="center"></el-table-column>
            <el-table-column prop="lbtCishu" label="轮播次数" width="140" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="dialogFormVisible = true" type="text">编辑</el-button>
                    <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--        添加 -->
        <el-dialog
                title="提示"
                :visible.sync="tjlbt"
                width="30%"
                :before-close="handleClose">
            <span>这是一段信息</span>

        </el-dialog>
        <div class="tjlbt">
            <el-dialog title="添加轮播图" :visible.sync="dialogForm">
            <el-container>
                <el-header>
                    <span style="line-height: 60px">添加内容</span>
                    <el-button class="you" size="mini" icon="el-icon-refresh">刷新</el-button>
                    <el-button class="you" size="mini" icon="el-icon-arrow-left">返回</el-button>
                </el-header>
            </el-container>
            <el-container class="san">
                    <span style="line-height: 60px">添加内容</span>
                <el-main class="bj">
                    <div class="san">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                            <el-form-item label="名称：" prop="imgTitle" style="width: 500px">
                                <el-input v-model="ruleForm.imgTitle"></el-input>
                                <span style="font-size: 10px">名称只是作为辨别多个条目之用，并不显示在图片中</span>
                            </el-form-item>
                            <el-form-item label="位置：" prop="imgWeizhi">
                                <el-select v-model="ruleForm.imgWeizhi" placeholder="请选择">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="开始时间：" required>
                                <el-form-item prop="startDate" style="width: 222px">
                                    <el-date-picker type="date" placeholder="请选择时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="ruleForm.startDate" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-form-item>
                            <el-form-item label="到期时间：" required>
                                <el-form-item prop="expireDate" style="width: 222px">
                                    <el-date-picker type="date" placeholder="请选择时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="ruleForm.expireDate" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-form-item>
                            <el-form-item label="上线/下线：" prop="display">
                                <el-radio v-model="radio" label="1">上线</el-radio>
                                <el-radio v-model="radio" label="2">下线</el-radio>
                            </el-form-item>
                            <el-form-item label="图片：" prop="imgType">
                                <el-upload
                                        class="upload-demo"
                                        action="http://localhost:8081/up/upfile/"
                                        :on-preview="handlePreview"
                                        :on-remove="handleRemove"
                                        :before-remove="beforeRemove"
                                        multiple
                                        :limit="3"
                                        :on-exceed="handleExceed"
                                        :file-list="fileList">
                                    <el-button class="el-upload__text" icon="el-icon-upload">选择上传文件</el-button>
                                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过50kb</div>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="内容链接：" prop="imgTitle" style="width: 500px">
                                <el-input v-model="ruleForm.imgTitle"></el-input>
                            </el-form-item>
                            <el-form-item label="内容备注：">
                                <el-input type="textarea" v-model="ruleForm.remarks" placeholder="请输入内容" style="width: 320px"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button style="background: #1ABC9C;color:#FFFFFF" @click="submitForm()">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-main>
            </el-container>
            </el-dialog>
        </div>

<!--        编辑-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>这是一段信息</span>

        </el-dialog>

        <div class="xj">
            <el-dialog title="编辑轮播图" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="名称:" prop="imgTitle":label-width="formLabelWidth" style="width: 300px">
                        <el-input v-model="form.imgTitle" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="位置" prop="imgWeizhi" :label-width="formLabelWidth">
                        <el-select v-model="form.imgWeizhi" placeholder="请选择位置">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开始时间：" required>
                        <el-form-item prop="startDate" style="width: 222px">
                            <el-date-picker type="date" placeholder="请选择时间" v-model="form.startDate" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="到期时间：" required>
                        <el-form-item prop="expireDate" style="width: 222px">
                            <el-date-picker type="date" placeholder="请选择时间" v-model="form.expireDate" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="上线/下线：" prop="display">
                        <el-radio v-model="radio" label="1">上线</el-radio>
                        <el-radio v-model="radio" label="2">下线</el-radio>
                    </el-form-item>
                    <el-form-item label="图片：" prop="imgType">
                        <el-upload
                                class="upload-demo"
                                action="http://localhost:8081/up/upfile/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="3"
                                :on-exceed="handleExceed"
                                :file-list="fileList">
                            <el-button class="el-upload__text" icon="el-icon-upload">选择上传文件</el-button>
                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过50kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="内容链接：" prop="imgTitle" style="width: 500px">
                        <el-input v-model="form.imgTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="内容备注：">
                        <el-input type="textarea" v-model="form.remarks" placeholder="请输入内容" style="width: 320px"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                fileList: [
                    ],
                dialogForm:false,
                value: false,
                ruleForm: {
                    imgTitle: '',
                    imgWeizhi: '',
                    startDate: '',
                    expireDate: '',
                    display: 1,
                    imgType: '',
                    remarks: ''

                },
                form: {
                    imgTitle: '',
                    imgWeizhi: '',
                    startDate: '',
                    expireDate: '',
                    display: 1,
                    imgType: '',
                    remarks: ''
                },
                radio: '1',
                dialogFormVisible: false,

                drawer: false,
                formInline: {
                    imgTitle: '',
                    imgWeizhi: '',
                    display:''
                },
                list:[

                ],

            }
        },

        methods: {
            async submitForm(){

                var params =new URLSearchParams();
                params.append("imgTitle",this.ruleForm.imgTitle)
                params.append("imgWeizhi",this.ruleForm.imgWeizhi)
                params.append("startDate",this.ruleForm.startDate)
                params.append("expireDate",this.ruleForm.expireDate)
                params.append("display",this.ruleForm.display)
                params.append("imgType",this.ruleForm.imgType)
                params.append("remarks",this.ruleForm.remarks)
                await this.$http.post("/lbt/addLbt",params).then(res =>{

                })
            },

            getda(){
                this.$http.get("/lbt/getAll").then(res =>{
                    console.log(res.data)
                    this.list = res.data
                })
            },
            handleClick(row) {
                console.log(row);
            },

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            onSubmit() {
                console.log('submit!');
            },
            open() {
                this.$alert('添加轮播图', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${ action }`
                        });
                    }
                });
            },

        },
        mounted(){
            this.getda();
        }
    }
</script>

<style scoped>
    .lun{
        background-color: #F6F7F9;
    }
    .yi{
        background-color:#F3F3F3;
    }
    .er{
        width: 1450px;
        margin-top: 20px;
        background-color:#F3F3F3;
    }
    .you{
        float: right;
        margin: 15px 10px 0px 0px;
    }
    .bj{
        background-color:#FFFFFF;
        padding: 25px 70px 0px 70px;
    }
    .dx{
        float: right;
        width: 100px;
        margin: 15px 10px 10px 10px;
    }
    .bg{
        width: 1450px;
        margin-top: 20px;
        background-color:#F9FAFC;

    }
    .xj{
        margin: 0px auto;
        width: 600px;
    }

</style>